<!-- <ion-header>
  <ion-toolbar>
    <ion-title class="i_toolbar">
      <div class="ion-float-left">
        <ion-icon name="chevron-back-outline" class="back_icon" (click)="backToAccount()"></ion-icon>
      </div>
      <div class="ion-float-right">
        <ion-text class="ion-float-right-text">
          STATEMENT
        </ion-text>
      </div>
    </ion-title>
  </ion-toolbar>
</ion-header> -->
<app-common-header [title]="'STATEMENT'" [routerUrl]="'/tabs/myAccount'">
</app-common-header>

<ion-content scroll-y="false">
  <div class="statement_content">
    <div class="statement_content_top">
      <ion-grid>
        <ion-row>
          <ion-col>
            <ion-img src="../../../../assets/images/android/drawable-mdpi/statement-2.png" alt=""></ion-img>
            <div>
              <ion-grid>
                <ion-row>
                  <ion-col>

                  </ion-col>
                  <ion-col class="ion-text-right ion-padding-vertical ion-padding-horizontal">
                    <ion-text color="lightOrange">
                      {{'statement.due_day' | translate}}
                    </ion-text>
                  </ion-col>
                </ion-row>
                <ion-row>
                  <ion-col class="ion-text-right ion-no-padding ion-padding-top ion-padding-horizontal">
                    {{'statement.current_balance' | translate}}
                  </ion-col>
                  <ion-col class="ion-text-right ion-text-right ion-no-padding ion-padding-top ion-padding-horizontal">
                    {{'statement.next_payment' | translate}}
                  </ion-col>
                </ion-row>
                <ion-row>
                  <ion-col class="ion-text-right ion-no-padding ion-padding-horizontal">
                    <ion-text color="navyBlue">
                      $ 5,100.00
                    </ion-text>
                  </ion-col>
                  <ion-col class="ion-text-right ion-no-padding ion-padding-horizontal">
                    <ion-text color="navyBlue">
                      $ 1,700.00
                    </ion-text>
                  </ion-col>
                </ion-row>
                <ion-row>
                  <ion-col class="ion-text-right">
                  </ion-col>
                  <ion-col class="ion-text-right ion-no-padding ion-padding-horizontal">
                    <span>
                      <ion-text color="wathet">
                        $ 300
                      </ion-text>
                    </span>
                    <span>
                      {{'statement.minimum_pay' | translate}}
                    </span>
                  </ion-col>
                </ion-row>
              </ion-grid>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
    <div class="statement_content_bottom">
      <ion-grid class="clean_padding_bottom">
        <ion-row class="clean_padding_bottom">
          <ion-col class="clean_padding_bottom">
            <div class="bottom_title">
              <div class="ion-float-left">
                <ion-label slot="start">
                  <ion-text color="primary" class="total_text"> {{'statement.total_orders' | translate}} </ion-text>
                </ion-label>
              </div>
              <div class="ion-float-right ion-text-right">
                <ion-label slot="end">
                  <ion-text color="primary" class="date_text"> 01/04-30/04 </ion-text>
                </ion-label>
              </div>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
      <div class="item_content">
        <ion-grid class="clean_padding_top">
          <ion-row>
            <ion-col>
              <div class="statement_content_items">
                <ion-list class="content_items">
                  <ion-item lines="none" class="flex_grow">
                    <ion-avatar slot="start" class="margin-vertical avatar_size">
                      <div>
                        <ion-text color="">
                          04-02
                        </ion-text>
                      </div>
                    </ion-avatar>
                    <ion-label slot="" class="ion-text-left ion-text-nowrap i_label">
                      <ion-text color="" class="ion-text-nowrap ion-text-left">
                        {{'statement.merchant_name' | translate}}
                      </ion-text>
                      <p class="ion-align-items-end">
                        04-24 15:50
                      </p>
                    </ion-label>
                    <ion-label slot="" class="ion-text-right ion-text-nowrap" id="amt_text">
                      <ion-text color="">
                        -39.88
                      </ion-text>
                    </ion-label>
                  </ion-item>
                </ion-list>
              </div>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <div class="statement_content_items">
                <ion-list class="content_items">
                  <ion-item lines="none" class="flex_grow">
                    <ion-avatar slot="start" class="margin-vertical avatar_size">
                      <div>
                        <ion-text color="">
                          04-02
                        </ion-text>
                      </div>
                    </ion-avatar>
                    <ion-label slot="" class="ion-text-left ion-text-nowrap i_label">
                      <ion-text color="" class="ion-text-nowrap ion-text-left">
                        {{'statement.merchant_name' | translate}}
                      </ion-text>
                      <p class="ion-align-items-end">
                        04-24 15:50
                      </p>
                    </ion-label>
                    <ion-label slot="" class="ion-text-right ion-text-nowrap" id="amt_text">
                      <ion-text color="">
                        -39.88
                      </ion-text>
                    </ion-label>
                  </ion-item>
                </ion-list>
              </div>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <div class="statement_content_items">
                <ion-list class="content_items">
                  <ion-item lines="none" class="flex_grow">
                    <ion-avatar slot="start" class="margin-vertical avatar_size">
                      <div>
                        <ion-text color="">
                          04-02
                        </ion-text>
                      </div>
                    </ion-avatar>
                    <ion-label slot="" class="ion-text-left ion-text-nowrap i_label">
                      <ion-text color="" class="ion-text-nowrap ion-text-left">
                        {{'statement.merchant_name' | translate}}
                      </ion-text>
                      <p class="ion-align-items-end">
                        04-24 15:50
                      </p>
                    </ion-label>
                    <ion-label slot="" class="ion-text-right ion-text-nowrap" id="amt_text">
                      <ion-text color="">
                        -39.88
                      </ion-text>
                    </ion-label>
                  </ion-item>
                </ion-list>
              </div>
            </ion-col>
          </ion-row>


          <ion-row>
            <ion-col>
              <div class="statement_content_items">
                <ion-list class="content_items">
                  <ion-item lines="none" class="flex_grow">
                    <ion-avatar slot="start" class="margin-vertical avatar_size">
                      <div>
                        <ion-text color="">
                          04-02
                        </ion-text>
                      </div>
                    </ion-avatar>
                    <ion-label slot="" class="ion-text-left ion-text-nowrap i_label">
                      <ion-text color="" class="ion-text-nowrap ion-text-left">
                        {{'statement.merchant_name' | translate}}
                      </ion-text>
                      <p class="ion-align-items-end">
                        04-24 15:50
                      </p>
                    </ion-label>
                    <ion-label slot="" class="ion-text-right ion-text-nowrap" id="amt_text">
                      <ion-text color="">
                        -39.88
                      </ion-text>
                    </ion-label>
                  </ion-item>
                </ion-list>
              </div>
            </ion-col>
          </ion-row>

          <ion-row>
            <ion-col>
              <div class="statement_content_items">
                <ion-list class="content_items">
                  <ion-item lines="none" class="flex_grow">
                    <ion-avatar slot="start" class="margin-vertical avatar_size">
                      <div>
                        <ion-text color="">
                          04-02
                        </ion-text>
                      </div>
                    </ion-avatar>
                    <ion-label slot="" class="ion-text-left ion-text-nowrap i_label">
                      <ion-text color="" class="ion-text-nowrap ion-text-left">
                        {{'statement.merchant_name' | translate}}
                      </ion-text>
                      <p class="ion-align-items-end">
                        04-24 15:50
                      </p>
                    </ion-label>
                    <ion-label slot="" class="ion-text-right ion-text-nowrap" id="amt_text">
                      <ion-text color="">
                        -39.88
                      </ion-text>
                    </ion-label>
                  </ion-item>
                </ion-list>
              </div>
            </ion-col>
          </ion-row>

          <ion-row>
            <ion-col>
              <div class="statement_content_items">
                <ion-list class="content_items">
                  <ion-item lines="none" class="flex_grow">
                    <ion-avatar slot="start" class="margin-vertical avatar_size">
                      <div>
                        <ion-text color="">
                          04-02
                        </ion-text>
                      </div>
                    </ion-avatar>
                    <ion-label slot="" class="ion-text-left ion-text-nowrap i_label">
                      <ion-text color="" class="ion-text-nowrap ion-text-left">
                        {{'statement.merchant_name' | translate}}
                      </ion-text>
                      <p class="ion-align-items-end">
                        04-24 15:50
                      </p>
                    </ion-label>
                    <ion-label slot="" class="ion-text-right ion-text-nowrap" id="amt_text">
                      <ion-text color="">
                        -39.88
                      </ion-text>
                    </ion-label>
                  </ion-item>
                </ion-list>
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
    
    </div>
  </div>
</ion-content>

<ion-tab-bar>
    <div class="bottom_box">
        <ion-grid class="">
          <ion-row class="">
            <ion-col class="">
              <div>
                <ion-button color="lightOrange" expand="block" (click)="toPay()">
                  {{'statement.pay' | translate}}
                </ion-button>
              </div>
            </ion-col>
            <ion-col class="">
              <div>
                <ion-button color="wathet" expand="block" (click)="toInstallment()">
                  {{'statement.installment' | translate}}
                </ion-button>
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>

</ion-tab-bar>